<template>
  <div>
    <div style="display: flex;flex-direction: column;width: 600px">
      <span style="font-size: 22px;font-weight: bold">我的音乐云盘</span>
      <span style="display: flex;flex-direction: row;font-size: 15px;margin: 20px 0 20px 0">
        云盘容量
        <el-progress :percentage="size/maxSize*100" :stroke-width="10" color="blue"
                     style="width: 150px;margin: 5px 5px 0 5px" :show-text="false"></el-progress>
        {{ size }}/{{ maxSize }}
        <p style="margin: 0;padding: 0 0 0 60px">歌曲永久保存，随时随地多端畅听</p>
      </span>
    </div>

    <!--歌曲列表-->
    <el-table :data="currentMusicListInfo" ref="playTable" highlight-current-row border stripe
              style="cursor: context-menu;width: 90%;margin-left: 50px;margin-bottom: 50px" @row-dblclick="playMusicList"
              @cell-click="toSingerPage">

      <el-table-column label="" type="index">
        <template scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>


      <el-table-column v-if="false" label="id" prop="simpleSong.id"></el-table-column>

      <el-table-column label="音乐标题" prop="songName"></el-table-column>

      <el-table-column label="歌手" prop="simpleSong.ar[0].name" width="100px;">
        <template scope="scope">
          <span>{{ scope.row.simpleSong.ar[0].name ? scope.row.simpleSong.ar[0].name : "未知歌手" }}</span>
        </template>
      </el-table-column>

      <el-table-column label="专辑" prop="album">
        <template scope="scope">
          <span>{{ scope.row.album ? scope.row.album : "未知专辑" }}</span>
        </template>
      </el-table-column>

      <el-table-column label="格式" prop="fileName">
        <template scope="scope">
          <span>{{ (scope.row.fileName).split('.')[1] }}</span>
        </template>
      </el-table-column>

      <el-table-column label="大小" prop="fileSize">
        <template scope="scope">
          <span>{{ (scope.row.fileSize / 1024 / 1024).toFixed(1) }}MB</span>
        </template>
      </el-table-column>

      <el-table-column label="上传时间" prop="addTime" width="100px;"></el-table-column>

    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 内存
      size: 1,
      maxSize: 1,
      //当前音乐的对象
      currentMusicListInfo: [],
      //父组件当前播放的音乐的id
      curId: parseInt(window.localStorage.getItem('curPlayMusicId')),
      //歌单的歌曲id合集
      songListInfo: [],
    }
  },
  created() {
    //获取音乐云盘的数据
    this.getCloudData()
    //注册监听的事件 在main.js中定义了
    window.addEventListener('setItem', () => {
      this.curId = parseInt(localStorage.getItem('curPlayMusicId'))
    })
  },
  methods: {
    getCloudData() {
      this.$http.get('/user/cloud', {params: {limit: 1000}}).then(res => {
        this.size = (res.data.size / 1024 / 1024 / 1024).toFixed(1)
        this.maxSize = (res.data.maxSize / 1024 / 1024 / 1024).toFixed(0)
        this.currentMusicListInfo = res.data.data
        //处理时间
        this.currentMusicListInfo.forEach(item => {
          const dt = new Date(item.addTime)

          const y = dt.getFullYear()
          const m = (dt.getMonth() + 1 + '').padStart(2, '0')
          const d = (dt.getDay() + '').padStart(2, '0')

          item.addTime = `${y}-${m}-${d}`
        })
        //设置歌单所有歌曲的id信息
        this.setSongListInfo()
      })
    },
    //双击歌曲添加数据进去,并循环播放(向父组件传递参数)
    playMusicList(row) {
      this.$emit('setSongListInfo', this.songListInfo, row.simpleSong.id)
    },
    //设置歌单所有歌曲的id
    setSongListInfo() {
      this.currentMusicListInfo.forEach(item => {
        this.songListInfo.push(item.simpleSong.id)
      })
    },
    //点击歌手名跳转歌手详细页面
    toSingerPage(row, column, cell) {
      if (column.label === "歌手") {//点击的是歌手那一列 进入歌手详情页
        this.$router.push('/singer/' + row.simpleSong.ar[0].id)
      }
    }
  }
}
</script>

<style scoped>

</style>
